<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      * {
        margin: 0;
        padding: 0;
      }
      /* 可以看到margin重合了 */
      /* 用box3套住box1并设置overflow触发BFC,可以发现margin相加了 */
      .box3 {
        overflow: hidden;
      }
      .box1 {
        background-color: aqua;
        height: 100px;
        width: 100px;
        margin-bottom: 100px;
      }

      .box2 {
        background-color: aquamarine;
        height: 100px;
        width: 100px;
        margin-top: 50px;
        margin-bottom: 50px;
      }

      /* 高度塌陷 */
      .box4 {
            border: 1px solid blue;
            overflow: hidden;
      }
      .box5 {
        background-color: aquamarine;
        height: 100px;
        width: 100px;
        float: left;
      }

    </style>
  </head>
  <body>
    <!-- 
        BFC的触发（原文）
        Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.

        block formatting contexts 块级格式化上下文
        简单翻译一下触发BFC大致可分为
        1.设置float属性添加浮动
        2.绝对定位的元素
        3.display不为block的块级容器，比如：inline-blocks, table-cells, and table-captions
        4.overflow不为visible的块级盒

        解析：
        1.BFC可以理解为元素的一种属性，触发后会形成一个独立的区域，按照正常普通流布局，内外元素互不干扰
        2.根元素html默认触发BFC
        3.BFC多作用于父元素来方便子元素的布局，可以大致理解为重新形成了一个小页面
        4.BFC的区域通常不会与浮动元素重，但在设置定位的情况下可能会重叠，尽量避免这种情况
        
        用途：
        1.解决上下margin的重叠
        2.解决高度塌陷
        3.解决margin-top作用于父元素
        4.自适应两栏布局
        
        特殊情况：
        通常情况下给body设置overflow无法触发BFC，此问题详见bfc3.html
        
     -->
    <!-- 简单展示一下BFC常见的用途 -->
    <div class="box3">
      <div class="box1"></div>
    </div>
    <div class="box2"></div>

    <div class="box4">
        <div class="box5"></div>
    </div>
  </body>
</html>